<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="进库记录管理" name="first">
        <template v-if="enterRecordList.length >= 0">
          <div class="top">
            <ExcelButton @outExcel="outExcel" :isExcelLoading='isExcelLoadingOne' />
          </div>
          <ElTable refName="entryList" @pageChange="pageChange" :data-source="enterRecordList"
            :data-config="tableConfig" :total="total" :pageSize="pageSize" :pageNum="pageNum" :isLoading="isLoading">
            <template #approvalStatus="{ scope }">
              <span>{{ scope.row.approvalStatus && scope.row.approvalStatus.info }}</span>
            </template>
          </ElTable>
        </template>
      </el-tab-pane>
      <!-- <el-tab-pane label="备案人员管理" name="second">
        <template v-if="enterRecordList.length > 0">
          <div class="top">
            <ExcelButton @outExcel="outExcel" :isExcelLoading='isExcelLoadingTwo' />
          </div>
          <ElTable refName="staffList" @pageChange="pageChange" :data-source="staffRecordList"
            :data-config="tableConfigStaff" :total="total" :pageSize="pageSize" :pageNum="pageNum"
            :isLoading="isLoading">
            <template #identity="{ scope }">
              <span>{{ scope.row.identity.info }}</span>
            </template>
            <template #idFile="{ scope }">
              <el-image style="height: 30px;" :src="scope.row.idFile" :preview-src-list="[scope.row.idFile]">
              </el-image>
            </template>
          </ElTable>
        </template>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
import Cookies from "js-cookie";
import { getEnterRecordList, 
  // getStaffRecordList
} from "@/api/member/entry.js";
import ElTable from "@/components/table/ElTable.vue";
import ExcelButton from "@/components/public-style/ExcelButton";
export default {
  components: { ElTable, ExcelButton },
  data() {
    return {
      downloadUrl: '',
      downloadName: '',
      activeName: "first",
      enterRecordList: [],
      // staffRecordList: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      isLoading: false,
      tableConfig: [
        {
          prop: "createdOn",
          label: "日期",
        },
        {
          prop: "workerName",
          label: "申请人",
        },
        {
          prop: "enterStaff",
          label: "进库人员",
        },
        {
          prop: "reason",
          label: "进库事由",
        },
        {
          prop: "startOn",
          label: "进库时间",
        },
        {
          prop: "endOn",
          label: "出库时间",
        },
        {
          prop: "approvalStatus",
          label: "状态",
        },
      ],
      tableConfigStaff: [
        {
          prop: "createdOn",
          label: "创建时间",
        },
        {
          prop: "fullname",
          label: "姓名",
        },
        {
          prop: "identity",
          label: "身份",
        },
        {
          prop: "mobile",
          label: "手机号",
        },
        {
          prop: "idNumber",
          label: "身份证号",
        },
        {
          prop: "idFile",
          label: "身份证图片",
        },
      ],
      exportData: {},
      isExcelLoadingOne: false,
      isExcelLoadingTwo: false
    };
  },
  mounted() {
    this.getEnterRecordList();
  },
  methods: {
    getData() {
      if (this.activeName == "first") {
        this.getEnterRecordList();
      // } else if (this.activeName == "second") {
      //   this.getStaffRecordList();
      }
    },
    // 分页变化
    pageChange(emitData) {
      this.pageNum = emitData.pageNum;
      this.pageSize = emitData.pageSize;
      this.getData();
    },
    // tab切换
    handleClick() {
      this.total = 0;
      this.pageNum = 1;
      this.pageSize = 10;
      this.getData();
    },
    // 获取进库记录
    getEnterRecordList() {
      const data = {};
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      this.isLoading = true;
      getEnterRecordList(data, params)
        .then((res) => {
          res.data.map((e) => {
            e.createdOn = this.$moment(e.createdOn * 1000).format("YYYY-MM-DD HH:mm:ss");
            e.startOn = this.$moment(e.startOn * 1000).format("YYYY-MM-DD HH:mm:ss");
            e.endOn = this.$moment(e.endOn * 1000).format("YYYY-MM-DD HH:mm:ss");
          });
          this.enterRecordList = res.data;
          this.total = res.total;
          this.isLoading = false;
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    // // 获得 备案人员列表
    // getStaffRecordList() {
    //   const data = {};
    //   const params = {
    //     pageSize: this.pageSize,
    //     pageNum: this.pageNum,
    //   };
    //   this.isLoading = true;
    //   getStaffRecordList(data, params)
    //     .then((res) => {
    //       res.data.map((e) => {
    //         e.createdOn = this.$moment(e.createdOn * 1000).format("YYYY-MM-DD HH:mm:ss");
    //         // e.idFile = "https://www.qcdoc.cn/api/worker-system/news/getFileByPath?path=1/7/2/2022-08-03/1659505419980_841.jpg";
    //       });
    //       this.staffRecordList = res.data;
    //       this.total = res.total;
    //       this.isLoading = false;
    //     })
    //     .catch((err) => {
    //       this.isLoading = false;
    //     });
    // },

    // 导出列表
    outExcel() {
      if (this.activeName == "first") {
        this.isExcelLoadingOne = true
        this.downloadUrl = "/api/depot/enterDepot/exportEnterRecordList"
        this.downloadName = "进库记录_" + this.$moment(new Date()).format("YYYY-MM-DD") + ".xlsx";
      // } else if (this.activeName == "second") {
      //   this.isExcelLoadingTwo = true
      //   this.downloadUrl = "/api/depot/enterDepot/exportStaffRecordList"
      //   this.downloadName = "备案人员记录_" + this.$moment(new Date()).format("YYYY-MM-DD") + ".xlsx";
      }
      axios({
        headers: {
          Authorization: JSON.parse(Cookies.get("userInfo")).token,
        },
        url: this.downloadUrl,
        method: "post",
        responseType: "blob", // 后台响应数据类型
        data: this.exportData,
      }).then((response) => {
        this.isExcelLoadingOne = false
        this.isExcelLoadingTwo = false
        const link = document.createElement("a");
        link.href = window.URL.createObjectURL(new Blob([response.data]));
        link.setAttribute("download", this.downloadName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.top {
  text-align: right;
}
</style>
